<template>
    <div>
        <div class="flex">
            <div class="box"
                :style="$store.state.theme.useCustomTheme === '7-gpx' ? 'background-color: #f5f5f5;' : 'background-color:#e9eef3'">
                <div>GPX Server状态：{{ status }}</div>
                <div class="button-container">
                    <el-button type="primary" :disabled="isRunning" @click="handleServer">{{ isRunning ? '已启动' : '启动'
                        }}</el-button>
                </div>
            </div>
        </div>
        <div class="flex"> <!-- 让表格单独处于一个容器 -->
            <p style="margin-bottom: 10px;">当前连接的GPX列表<small>【最新连接列表请刷新后查看】</small></p>
            <el-table :data="MachineData" style="width:70%;" border :header-cell-style="headerStyleEvent">
                <el-table-column prop="machineName" label="GPX机器名" align="center"></el-table-column>
                <el-table-column prop="ip" label="IP" align="center"></el-table-column>
                <el-table-column prop="lastConnTime" label="上一次通信时间" align="center"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { fetchSystemStatus, fetchSystemStart } from '@/network/gpx'
export default {
    name: '',
    props: {},
    components: {},
    data() {
        return {
            status: '',
            isRunning: false,
            MachineData: []
        }
    },
    mounted() {
        this.getSystemStatus()
    },
    methods: {
        async getSystemStatus() {
            try {
                const res = await fetchSystemStatus()
                if (res.status == 200) {
                    this.status = res.data.gpxServerState.desc
                    this.isRunning = res.data.gpxServerState.isRunning
                    this.MachineData = res.data.connState
                    console.log(res);
                }
            } catch (error) {
                console.log(error);

            }
        },
        async getSystemStart() {
            try {
                const res = await fetchSystemStart()
                if (res.status == 200) {
                    this.status = res.data.gpxServerState.desc
                    this.isRunning = res.data.gpxServerState.isRunning
                    this.MachineData = res.data.connState
                    this.$message({
                        message: this.isRunning ? '启动成功!' : '启动失败!',
                        type: 'success'
                    });

                }
            } catch (error) {
                console.log(error);

            }
        },
        headerStyleEvent() {
            if (this.$store.state.theme.useCustomTheme === "7-gpx") {
                return { background: '#f5f5f5', color: '#2F4F4F' };
            } else {
                return { background: '#eef1f6', color: '#606266' }
            }
        },
        handleServer() {
            this.isRunning = true
            this.getSystemStart()

        }
    }
}
</script>

<style scoped>
.box {
    height: 160px;
    width: 60%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex {
    display: flex;
    flex-direction: column;
    /* 改为列方向排列，表格会在盒子下面 */
    justify-content: center;
    align-items: center;
}

.button-container {
    margin-top: 40px;
}
</style>
